import React, { useState, useEffect } from "react";
import { Form, Button, Input, Divider, Space, Select, Row, Col } from "antd";
import API from "@/api/CgApi.js";
const { TextArea } = Input;

import useFormData from "./useFormData";
export default function (props) {
  const clearFormData = {
    project: "",
    name: "",
    classify: "",
    fileNameDefault: "",
    templateContent: "",
    remark: "",
  };

  const { formFieldPubPros, formFieldPubProsForSelect, formData, setFormData } =
    useFormData({ props, clearFormData });

  const loadFormData = (id) => {
    API.queryGeneratorTemplateById(id).then((r) => {
      console.log(r);
      setFormData(r.result);
    });
  };

  useEffect(() => {
    console.log("child", props.editId);
    if (props.editId) {
      loadFormData(props.editId);
    } else {
      setFormData(clearFormData);
    }
  }, [props.editId]);

  const colLayout = { xs: 24, sm: 12, md: 8, lg: 8 };

  const saveData = () => {
    props.saveData(formData);
  };
  return (
    <div>
      <Row gutter={24}>
        <Col {...colLayout}>
          <dl>
            <dt>Project: </dt>
            <dd>
              <Select
                style={{ width: "100%" }}
                {...formFieldPubProsForSelect("project")}
                options={[
                  {
                    value: "LCA",
                    label: "LCA",
                  },
                  {
                    value: "GDM",
                    label: "GDM",
                  },
                  {
                    value: "QDS",
                    label: "QDS",
                  },
                ]}
              />
            </dd>
          </dl>
        </Col>
        <Col {...colLayout}>
          <dl>
            <dt>Template Name:</dt>
            <dd>
              <Input style={{ width: "100%" }} {...formFieldPubPros("name")} />
            </dd>
          </dl>
        </Col>

        <Col {...colLayout}>
          <dl>
            <dt>Classify: </dt>
            <dd>
              <Select
                style={{ width: "100%" }}
                {...formFieldPubProsForSelect("classify")}
                options={[
                  {
                    value: "Backend",
                    label: "Backend",
                  },
                  {
                    value: "Frontend",
                    label: "Frontend",
                  },
                ]}
              />
            </dd>
          </dl>
        </Col>
        <Col {...colLayout}>
          <dl>
            <dt>File Default Name: </dt>
            <dd>
              <Input
                style={{ width: "100%" }}
                {...formFieldPubPros("fileNameDefault")}
              />
            </dd>
          </dl>
        </Col>

        <Col {...colLayout}>
          <dl>
            <dt>Remark: </dt>
            <dd>
              <Input
                style={{ width: "100%" }}
                {...formFieldPubPros("remark")}
              />
            </dd>
          </dl>
        </Col>
      </Row>
      <dl>
        <dt>Template Content:</dt>
        <dd>
          <TextArea
            autoSize={{ minRows: 10 }}
            {...formFieldPubPros("templateContent")}
          ></TextArea>
        </dd>
      </dl>

      <Divider></Divider>
      {/* {JSON.stringify(formData)} */}
      <Space style={{ width: "100%", justifyContent: "flex-end" }}>
        <Button type="primary" onClick={saveData}>
          Submit
        </Button>
        <Button onClick={props.callback}>Close</Button>
      </Space>
    </div>
  );
}
